import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { withRouter } from 'react-router';
import { Menu, Icon, message,  } from 'antd';
import axios from 'axios';
import store from '../../../redux/index';
import './index.less';
const SubMenu = Menu.SubMenu;

class LeftSider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rootSubmenuKeys: [],
      openKeys: ['/admin'],
      current: '/admin/user',
      data: []
    };
  }

  onOpenChange = (openKeys) => {
    // const latestOpenKey = openKeys[1];
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : [],
      });
    }
  }
  handleClick = (e) => {
    this.setState({
      current: e.key,
    });
    store.dispatch({ type: 'ADD_TAGS', text: e.key, title: e.item.props.title });
    // console.log(store.getState()["addTags"].tagsMap)
  }
  getMenus = () => {
    const $this = this;
    const Token = sessionStorage.getItem('token');
    axios({
      method: 'get',
      url: '/api/admin/user/front/menus?token=' + Token,
      // headers:{
      //     Authorization:Token
      // }
    })
      .then(function (response) {
        if (response.data.status === 40101) {
          message.error('登录信息已过期，请重新登录！');
          sessionStorage.removeItem('token');
          store.dispatch({ type: 'loginOut' });
          $this.props.history.push('/');
          return;
        } else {
          if (response.data.status === 40301) {
            message.error('您没有权限访问数据！');
          } else {
            $this.setState({
              data: response.data
            });
            response.data.map((item) => {
              return $this.state.rootSubmenuKeys.push(item.href);
            });
          }
        }

      })
      .catch(function (error) {
        console.log(error);
      });
  }
  handlePop =() => {

    // const { match, location, history } = this.props
    const openKeysNow = ['/' + this.props.location.pathname.split('/')[1]];
    this.setState({
      openKeys: openKeysNow
    });
    this.setState({
      current: this.props.location.pathname
    });

  }
  componentWillMount() {
    // this.forceUpdate();
    this.getMenus();
    this.handlePop();
  }
  componentDidMount() {
    // window.addEventListener("popstate", this.handlePop.bind(this))
  }
  componentDidUpdate() {
    // console.log(this.props.location.pathname)
    // this.handlePop()
  }
  render() {
    return (
      <div>
        <Menu
          theme="light"
          mode="inline"
          openKeys={this.state.openKeys}
          onOpenChange={this.onOpenChange}
          selectedKeys={[this.props.location.pathname]}
          // style={{ width: 200 }}
          onClick={this.handleClick}
        >
          {
            this.state.data.map((item, key) => {
              if (item.children.length === 0) {
                return <Menu.Item key={item.href} title={item.title}><Link to={item.href}><Icon type={item.icon} />{item.title}</Link></Menu.Item>;
              } else {
                return <SubMenu key={item.href} title={<span><Icon type={item.icon} /><span>{item.title}</span></span>}>
                  {
                    item.children.map((item2, key) => {
                      return <Menu.Item key={item2.href} title={item2.title}><Link to={item2.href}><Icon type={item2.icon} />{item2.title}</Link></Menu.Item>;
                    })
                  }
                </SubMenu>;
              }
            })
          }
        </Menu>
      </div>
    );
  }


}
export default withRouter(LeftSider);

